<template>
  <div>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="#"> </el-table-column>
      <el-table-column prop="productName" label="商品名字"> </el-table-column>
      <el-table-column  label="商品图片"> 
        <template slot="img">
            <img src="/day12/public/img/10.jpg" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" label="商品价格"> </el-table-column>
      <el-table-column prop="number" label="商品数量"> </el-table-column>
      <el-table-column prop="name" label="操作">
        <el-button type="danger">删除</el-button>
        <el-button type="primary">删除</el-button>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
    props:['listData'],
    data() {
        return {
            tableData:[],
            multipleSelection: []
        }
    },
    methods: {
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
    mounted () {
        
    },
    created () {
        console.log(this._props.listData)
        this.tableData=this._props.listData
    },
};
</script>

<style lang="scss" >

</style>